/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-19 09:10:50
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-19 11:18:01
 */

/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-15 15:00:29
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-15 15:13:25
 */

import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Input, Image } from '@tarojs/components'
// import {AtSwitch, AtForm} from 'taro-ui'

import '../../images/public/style.css'
import './index.scss'


/*
    参数说明
    传入：{
        className,//可选 备注：父容器className便于修改背景颜色，阴影等
        imageUrl,//可选 备注：不传默认使用默认占位图
        selectedImageUrl, //可选 备注：不传默认使用imageUrl，若也无imageUrl默认占位图
        name, //可选 备注：不传默认为“标题X”
        selectedName, //已剔除
        selectedNameColor,//可选 备注：默认颜色rgb(0,144,255)
        defaultSelectedIndex,//可选 备注：默认0
    }
    提供回调事件：{
        handleChange(index)//index为点击当前点击索引index
    }
*/

export default class LgSearch extends Component {
  constructor () {
    super(...arguments)
    this.onFocus = this.onFocus.bind(this)
    this.onBlur = this.onBlur.bind(this)
    this.onInput = this.onInput.bind(this)
    this.onClose = this.onClose.bind(this)
    this.onConfirm = this.onConfirm.bind(this)
    this.clearInput = this.clearInput.bind(this)
    this.showCompleteInput = this.showCompleteInput.bind(this)
  }
  state = {
    searchType:'default',
    isFold:false,//只有searchType为fold时有效
    foldWidth:0,
    isShowDel:false,
    isFocus:false,
    value:'',
  }

  showCompleteInput(){
    if(this.state.searchType == 'fold'){
        this.props.triggerFold && this.props.triggerFold(1)
    }
  }
  onFocus(){
    this.setState({ isShowDel:this.state.value.length>0,isFocus:true })

  }
  onBlur(){
    this.setState({ isFocus:false })
  }

  onClose(){
    this.props.onClose && this.props.onClose(this.state.value)
  } 

  onInput(e){
      let { value } = e.detail
      , len = this.props.maxlength || 20
      if(value > 20)value = value.slice(0, 20)
      this.setState({ value, isShowDel:value.length>0 })
      this.props.onInput && this.props.onInput(value)
  }
  onConfirm(){
      this.props.onSearch && this.props.onSearch(this.state.value)
  }
  clearInput(){
      this.setState({ value:'', isShowDel:false })
      this.props.onInput && this.props.onInput('')
      this.props.onSearch && this.props.onSearch('')
      this.props.onClose && this.props.onClose()
  }

  componentWillReceiveProps(np){
      if(this.props.searchType == 'fold' && this.props.isFold != np.isFold){
          //更新折叠状态，若是关闭得清空input值
          this.setState({ isFold:np.isFold })
          this.clearInput()
      }
  }
  componentDidMount(){
      let props = this.props
      , searchType = props.searchType == 'fold' ? 'fold' : 'default'
      , isFold = !!props.isFold
      , foldWidth = searchType == 'fold' ? isFold ? ( props.foldWidth ? Taro.pxTransform(props.foldWidth) : Taro.pxTransform(121) ) : '100%' : '100%'   
      this.setState({ value:props.defaultValue||"", searchType, foldWidth, isFold })
  }

  render () {
    const lists = this.state.lists || []
    , className = this.props.className ? (' '+this.props.className) :  ""
    , maxlength = this.props.maxlength || 20
    , value = this.state.value
    , focus = this.state.isFocus
    , delSty = { display:this.state.isShowDel?'block':'none' }
    //折叠款相关变量↓
    const searchType = this.state.searchType//折叠款
    , isFold = this.state.isFold
    , foldWidth = isFold ? this.state.foldWidth : '100%'
    , wrapperWidth = searchType == 'fold' ? foldWidth : '100%'
    , wrapperSty = searchType=='fold' ? { width:wrapperWidth } : {}
    , placeholder = searchType=='fold' ? (isFold ? '搜索' : this.props.placeholder) : (this.props.placeholder || '搜索')
    return (
        // <View className="lg_search_warp">
            <View 
                className={'search_container'+(searchType=='fold'?' search_container_tran':'')+(searchType=='fold'&&isFold?' search_container_fold':'')+className} 
                style={wrapperSty} 
                onClick={this.showCompleteInput}
            >
                <View className="search_icon_wrapper" onClick={this.onConfirm}>
                    <View className={'search_icon icon-b01401'+(focus?' search_icon_focus':'')}></View>
                </View>
                <Input 
                    className="search_input" 
                    type='text'
                    placeholderClass="search_input_placeholder" 
                    confirmType="search"
                    maxlength={maxlength}
                    placeholder={placeholder}
                    value={value}
                    focus={focus}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onClose={this.onClose}
                    onInput={this.onInput}
                    onConfirm={this.onConfirm}
                />
                <View className="search_del" style={delSty} onClick={this.clearInput}>
                    <Image className="search_del_icon" src={require('./images/0b01701.svg')} mode="scaleToFill"></Image>
                </View>
            </View>
            // {this.props.searchDetail ? <LgSearchDetail /> : null} 
        //</View>
    )
  }
}
class LgSearchDetail extends Component {
    constructor () {
      super(...arguments)
    //   this.onFocus = this.onFocus.bind(this)
    }
    render() {
        return (
            <View className="search_detail_list">

            </View>
        )
    }
}